<template>
  <div>
    <q-form @submit="submit" class="q-gutter-md dialog-content" style="height: 567px">
      <div>
        <GatewayDetail v-bind="$attrs"/>
        <div class="info-detail">
          <div class="title flex justify-between" style="margin-bottom: 0">
            <div class="flex-1 info-content">设备详情</div>
            <div class="operate-content">操作</div>
          </div>
          <div class="content flex justify-between">
            <div class="flex-1 padding-20">
              <div class="flex justify-between">
                <div>
                  <div class="padding-b-10">设备编号: {{dataInfo.assetNumber}}</div>
                  <div class="padding-b-10">设备型号: {{dataInfo.deviceSerialIot}}</div>
                  <div class="flex ">
                    <div class="margin-r-10">状态:</div>
                    <div class="living">
                      <div class="status" :class="{'off': dataInfo.deviceState !== 'ONLINE'}"></div>
                      {{dataInfo.deviceState === 'ONLINE' ? '在线' : '离线'}}
                    </div>
                  </div>
                </div>
                <div>
                  <div class="padding-b-10">设备类型: {{dataInfo.deviceTypeIot}}</div>
                  <div>通讯协议: {{dataInfo.deviceProtocolIot}}</div>
                </div>
                <div>
                  <div class="padding-b-10">设备厂家: {{dataInfo.deviceFactoryIot}}</div>
                  <div>通讯方式: {{dataInfo.communicationTypeIot}}</div>
                </div>
              </div>
            </div>
            <div class="operate-content" style="padding:30px 16px">
              <q-btn
                  flat
                  dense
                  color="primary"
                  :disable="dataInfo.deviceState !== 'ONLINE'"
                  @click="configuration(dataInfo)"
                >
                  配置
                </q-btn>
            </div>
          </div>
        </div>
      </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="上一步" color="primary" @click="preStep" class="q-mr-md"/>
        <q-btn unelevated label="完成" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
    <!-- 网口配置 -->
    <NetworkPortConfig :visible="networkDialog" @close="networkDialog = false" :deviceNum="deviceNum" @configSuccess="configNetWorkSuccess"></NetworkPortConfig>
    <!-- 串口配置 -->
    <SerialPortConfig :visible="serialDialog" @close="serialDialog = false"></SerialPortConfig>
  </div>
</template>

<script>
import GatewayDetail from './gateway-detail'
import NetworkPortConfig from './network-port-config'
import SerialPortConfig from './serial-port-config'
import { subDevice } from '../../../../../boot/miot/list'

export default {
  name: 'config-equipment',
  components: {
    GatewayDetail,
    NetworkPortConfig,
    SerialPortConfig
  },
  props: {
    boxId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      submitting: false,
      // 表格内容
      tableColumns: [
        { name: 'id', field: 'id', label: '序号', align: 'left' },
        { name: 'deviceState', field: 'deviceState', label: '状态', align: 'left' },
        { name: 'assetNumber', field: 'assetNumber', label: '设备编号', align: 'left' },
        { name: 'deviceTypeIot', field: 'deviceTypeIot', label: '设备类型', align: 'left' },
        { name: 'deviceFactoryIot', field: 'deviceFactoryIot', label: '设备厂家', align: 'left' },
        { name: 'deviceSerialIot', field: 'deviceSerialIot', label: '设备型号', align: 'left' },
        { name: 'deviceProtocolIot', field: 'deviceProtocolIot', label: '通讯协议', align: 'center' },
        { name: 'communicationTypeIot', field: 'communicationTypeIot', label: '通讯方式', align: 'center' },
        {
          name: 'operations',
          field: 'operations',
          label: '操作',
          align: 'center'
        }
      ],
      tableData: [
      ],
      isTableLoading: false,
      timer: null,
      times: 0,
      pagination: {
        page: 1, // 当前页码
        rowsPerPage: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      networkDialog: false,
      serialDialog: false,
      deviceNum: null
    }
  },
  created () {
    this.getSubDevice()
    this.getDeviceInterval()
  },
  computed: {
    dataInfo () {
      if (this.tableData && this.tableData.length === 1) {
        return this.tableData[0]
      }
      return {}
    }
  },
  methods: {
    getDeviceInterval () {
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.times >= 5) {
          clearInterval(this.timer)
          this.times = 0
        }
        this.getSubDevice()
        this.times++
      }, 5000)
    },
    async getSubDevice () {
      if (this.boxId) {
        const { data } = await subDevice(this.boxId)
        if (data) {
          this.tableData = data.map((item, index) => {
            const communicationTypeIot = item.communicationTypeIot === 'LAN' || item.communicationTypeIot === 'lan' ? item.communicationTypeIot + '/PCMCIA' : item.communicationTypeIot
            const tr = { ...item, communicationTypeIot: communicationTypeIot }
            return {
              ...tr,
              id: index + 1
            }
          })
        }
      }
    },
    preStep () {
      clearInterval(this.timer)
      this.$emit('preStep')
    },

    async submit () {
      clearInterval(this.timer)
      this.$emit('successSubmit')
    },

    configuration (row) {
      if (row.communicationTypeIot.substring(0, 3).toUpperCase() === 'LAN') {
        this.deviceNum = row.assetNumber
        this.networkDialog = true
      } else if (row.communicationTypeIot.toUpperCase() === 'IO') {
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          IO通讯无需子设备配置，请点击完成，结束配置流程</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          },
          cancel: {
            unelevated: true,
            outline: true,
            label: '取消'
          }
        })
      } else {
        this.serialDialog = true
      }
    },

    configNetWorkSuccess () {
      this.networkDialog = false
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="stylus">
  .operate-content
    border-left 1px solid #d3d3d3
    width 80px
    display flex
    align-items center
    justify-content center
  .info-content
    padding 10px 20px
  .info-detail
    padding: 20px
    height: 340px
    .title
      background #f3f3f3
      border 1px solid #d3d3d3
      border-radius 6px 6px 0 0
    .content
      border 1px solid #d3d3d3
      border-top: none;
      border-radius 0 0 6px 6px

  .disabled
    color #999999 !important
  .living
    text-align right
    position relative
    width 43px
    .status
      width 10px
      height 10px
      border-radius 50%
      background $positive
      position absolute
      left 0
      top 5px
    .off
      background #666666

</style>
